﻿@using OPM.Class;
@using OPM.Class;
@using System.Web.Mvc;

@{
    Layout = "~/Views/Shared/_LayoutPopup.cshtml";
}

<div class="service_search_header">
    <div class="service_title">@Multi.customer</div>
</div>
<div class="service_box_table">
    <table id="service_table">
        <tr>
            <td>@Multi.is_secret</td>
            <td>
                <select id="cust_is_public">
                    <option value="">เลือก</option>
                    <option value="F">เปิดเผย</option>
                    <option value="T">ปกปิด</option>
                </select>
            </td>
            <td>@Multi.tel</td>
            <td>
                <input type="tel" name="tel" id="cust_tel" value="" />
                <div class="pin_add" id="tel" onclick="addstrtotext('cust_tel','cust_tel_all');"></div>
            </td>
        </tr>
        <tr>
            <td>@Multi.customer_type</td>
            <td>
                <select id="cust_type">
                    <option value="">เลือก</option>
                    <option value="C">บุคคล</option>
                    <option value="O">หน่วยงาน/องค์กร</option>
                    <option value="M">กลุ่มบุคคล</option>
                </select>
            </td>
            <td rowspan="2">&nbsp;</td>
            <td rowspan="2" class="tdBottom">
                <textarea style="height: 48px;" id="cust_tel_all"></textarea>
                <div class="pin_del" style="top: -25px;" onclick="deltext('cust_tel_all');"></div>
            </td>
        </tr>
        <tr>
            <td>@Multi.country</td>
            <td>
                @Html.DropDownList("cust_country_id", (SelectList)ViewBag.listOfCountry, "ประเทศ", null)
            </td>
        </tr>

        <tr>
            <td>@Multi.gender</td>
            <td>
                @Html.DropDownList("cust_gender_id", (SelectList)ViewBag.listOfGender, "เลือกเพศ", null)
            </td>
            <td>@Multi.mobile</td>
            <td>
                <input type="tel" name="tel" id="cust_mobile" value="" />
                <div class="pin_add" onclick="addstrtotext('cust_mobile','cust_mobile_all');"></div>
            </td>
        </tr>
        <tr>
            <td class="grouphide2">@Multi.title_name</td>
            <td class="grouphide2">
                <input name="title-name" type="text" id="cust_title" value=""></td>
            <td rowspan="2">&nbsp;</td>
            <td rowspan="2" class="tdBottom">
                <textarea style="height: 48px;" id="cust_mobile_all"></textarea>
                <div class="pin_del" style="top: -25px;" onclick="deltext('cust_mobile_all');"></div>
            </td>
        </tr>
        <tr>
            <td>@Multi.name</td>
            <td>
                <input type="text" name="name" id="cust_firstname" value=""></td>
        </tr>
        <tr>
            <td class="grouphide2">@Multi.lastname</td>
            <td class="grouphide2">
                <input type="text" name="title-name" id="cust_lastname" value=""></td>
            <td>@Multi.email</td>
            <td>
                <input type="text" name="email" id="cust_email" value="" />
                <div class="pin_add" id="email" onclick="addstrtotext('cust_email','cust_email_all');"></div>
            </td>
        </tr>
        <tr>
            <td>@Multi.citizen_id</td>
            <td>
                <input type="text" name="cust_citizen_id" id="cust_citizen_id" value=""></td>
            <td rowspan="2">&nbsp;</td>
            <td rowspan="2" class="tdBottom">
                <textarea style="height: 48px;" id="cust_email_all"></textarea>
                <div class="pin_del" style="top: -25px;" onclick="deltext('cust_email_all');"></div>
            </td>
        </tr>
        <tr>
            <td>@Multi.address</td>
            <td>
                <input type="text" name="title-name" id="cust_address" value=""></td>
        </tr>
        <tr id="tabProvince">
            <td>@Multi.province</td>
            <td>@Html.DropDownList("cboProvince", (SelectList)ViewBag.listOfProvinces, "จังหวัด", null) </td>
        </tr>
        <tr id="tabDistricts">
            <td>@Multi.district</td>
            <td>@Html.DropDownList("cboDistricts", (SelectList)ViewBag.listOfDistricts, "อำเภอ", null)</td>
        </tr>
        <tr id="tabSubDistricts">
            <td>@Multi.subdistrict</td>
            <td>@Html.DropDownList("cboSubDistricts", (SelectList)ViewBag.listOfSubDistricts, "ตำบล", null)</td>
        </tr>
        <tr>
            <td></td>
            <td><span class="note">@Multi.area</span></td>
            <td class="grouphide1">@Multi.cont_number</td>
            <td class="grouphide1">
                <input type="text" name="title-name" id="cust_number" class="half-input" value="">
                @Multi.people</td>
        </tr>
        <tr>
            @*<td></td>
            <td><a class="formBtn dBlock" data-block="defendant" href="@Url.Action("GetCrime", "Complaint")?a=country">จังหวัด/อำเภอ/ตำบล</a></td>*@
            <td class="grouphide2">@Multi.defective</td>
            <td class="grouphide2">
                <select id="cust_is_defective">
                    <option value="">เลือก</option>
                    <option value="T">ปกติ</option>
                    <option value="F">ผู้พิการ</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>@Multi.postcode</td>
            <td>
                <input type="text" name="title-name" id="cust_postcode" value=""></td>
        </tr>
        <tr>
            <td class="grouphide2">@Multi.birthdate</td>
            <td class="grouphide2">
                <input type="date" name="date-input" class="date-input" id="cust_birthday" value="" /></td>
            <td>@Multi.remark</td>
            <td>
                <textarea style="height: 48px;" id="cust_remark"></textarea>
                <input type="hidden" id="case_id" value="@ViewBag.Caseid" />
               
            </td>
        </tr>
    </table>
</div>
<div class="BoxServiceBottom">
    <div class="BoxServiceActionPrev floatL" onclick="cancelFunction();">@Multi.Cancel</div>
    <div class="BoxServiceActionNext floatR" onclick="AddCustomer();">@Multi.add</div>
    <div class="clear"></div>
</div>

<div class="dNone">
    <div id="inline_content">
        <div class="SaveSuccess">
            <div class="SaveSuccessTab1">@Multi.success</div>
            @*<div class="SaveSuccessTab2">รหัสการให้บริการ : <span>xyz12345678</span></div>*@
            <div class="SaveSuccessTab3" onclick="$.colorbox.close();">@Multi.finish</div>
        </div>
    </div>
</div>

<script src="~/js/jquery-ui.min.js"></script>
<script>


    var locationToRedirect = '';

    $(document).ready(function () {
        $("#cust_type").change(function () {
            var myType = $(this).val();
            if (myType == 'C') {
                $(".grouphide1 input , .grouphide1 select").prop('disabled', true);
                $(".grouphide2 input , .grouphide2 select").prop('disabled', false);
                $(".grouphide1").css('color', '#aaa');
                $(".grouphide2").css('color', '#000');
                $(".grouphide1 img").css('opacity', '0');
                $(".grouphide2 img").css('opacity', '1');
            } else if (myType == 'O') {
                $(".grouphide1 input , .grouphide1 select").prop('disabled', false);
                $(".grouphide2 input , .grouphide2 select").prop('disabled', true);
                $(".grouphide1").css('color', '#000');
                $(".grouphide2").css('color', '#aaa');
                $(".grouphide1 img").css('opacity', '1');
                $(".grouphide2 img").css('opacity', '0');
            } else if (myType == 'M') {
                $(".grouphide1 input , .grouphide1 select").prop('disabled', false);
                $(".grouphide2 input , .grouphide2 select").prop('disabled', true);
                $(".grouphide1").css('color', '#000');
                $(".grouphide2").css('color', '#aaa');
                $(".grouphide1 img").css('opacity', '1');
                $(".grouphide2 img").css('opacity', '0');
            } else {
                $(".grouphide1 input , .grouphide1 select").prop('disabled', false);
                $(".grouphide2 input , .grouphide2 select").prop('disabled', false);
                $(".grouphide1").css('color', '#000');
                $(".grouphide2").css('color', '#000');
                $(".grouphide1 img").css('opacity', '1');
                $(".grouphide2 img").css('opacity', '1');
            }
        });

        $("#country_id").change(function () {
            var Country = $("#country_id option:selected").text();

            if (Country == 'ไทย') {
                $("#tabProvince , #tabDistricts , #tabSubDistricts").show();
            } else {
                $("#tabProvince , #tabDistricts , #tabSubDistricts").hide();
            }
        });
        $("#cboProvince").change(function () {
            var url = "@Url.Content("~/Complaint/GetDistrictsJson")?provinceId=" + $(this).val();
            $.getJSON(url)
              .done(function (json) {
                  $('#cboDistricts').html('');
                  $.each(json, function (i, data) {
                      $('#cboDistricts').append(
                          '<option value="' + data.Id + '">' + data.Name + '</option>'
                      );
                  }
              )
              })
              .fail(function (jqxhr, textStatus, error) {
                  var err = textStatus + ", " + error;
                  console.log("Request Failed: " + err);
              });
        });


        $("#cboDistricts").change(function () {
            var url = "@Url.Content("~/Complaint/GetSubDistrictsJson")?districtId=" + $(this).val();
                $.getJSON(url)
                  .done(function (json) {
                      $('#cboSubDistricts').html('');
                      $.each(json, function (i, data) {
                          $('#cboSubDistricts').append(
                              '<option value="' + data.Id + '">' + data.Name + '</option>'
                          );
                      }
                  )
                  })
                  .fail(function (jqxhr, textStatus, error) {
                      var err = textStatus + ", " + error;
                      console.log("Request Failed: " + err);
                  });
            });
        $("#cboSubDistricts").change(function () {
            locationToRedirect += $("#cboSubDistricts option:selected").text() + " ";
            locationToRedirect += $("#cboDistricts option:selected").text() + " ";
            locationToRedirect += $("#cboProvince option:selected").text() + " ";
            locationToRedirect += $("#country_id option:selected").text();
            parent.addTextLocation2(locationToRedirect);
            console.log(locationToRedirect);
            parent.$.fn.colorbox.close();
        });
    });


        function addstrtotext(boxinput, boxoutput) {
            var str = $('#' + boxinput).val();
            var str2 = $('#' + boxoutput).val();
            if (str2 != '') {
                str = str2 + ',' + str;
            } else {
                str = str
            }
            $('#' + boxoutput).val(str);
            $('#' + boxinput).val('').focus();
        }

        function deltext(boxoutput) {
            $('#' + boxoutput).val('');
        }

        function cancelFunction() {
            parent.$.fn.colorbox.close();
        }

        //function savedataform() {
        //    $.colorbox({
        //        inline: true,
        //        width: "50%",
        //        href: "#inline_content",
        //        fastIframe: false,
        //        onClosed: function () {

        //            parent.$.fn.colorbox.close();
        //        }
        //    });
        //}

        function AddCustomer() {

            var cust_tel_all = $("#cust_tel_all").val();
            var cust_mobile_all = $("#cust_mobile_all").val();
            var cust_email_all = $("#cust_email_all").val();
            //var str = cust_tel_all + " " + cust_mobile_all + " " + cust_email_all

            var cust_is_public = $("#cust_is_public").val();

            var cust_tel = $("#cust_tel").val();

            var cust_country_id = $("#cust_country_id").val();

            var cust_type = $("#cust_type").val();//ประเภทบุคคล

            var cust_gender_id = $("#cust_gender_id").val();

            var cust_mobile = $("#cust_mobile").val();

            var cust_title = $("#cust_title").val(); //คำนำหน้าชื่อ

            var cust_firstname = $("#cust_firstname").val();

            var cust_lastname = $("#cust_lastname").val();

            var cust_email = $("#cust_email").val();

            var cust_citizen_id = $("#cust_citizen_id").val();

            var cust_address = $("#cust_address").val();

            var cust_subdistrict_id = $("#cboSubDistricts").val();

            var cust_district_id = $("#cboDistricts").val();

            var cust_province_id = $("#cboProvince").val();

            var cust_is_defective = $("#cust_is_defective").val();

            var cust_postcode = $("#cust_postcode").val();

            var cust_number = $("#cust_number").val();

            var cust_remark = $("#cust_remark").val();

            var cust_birthday = $("#cust_birthday").val();

            var cust_contact_detail = cust_email;
            var case_id = $("#case_id").val();


            $.ajax({
                type: 'get',
                dataType: 'json',
                cache: false,
                url: '/GroupList/AddCustomer',
                data: {
                    id: case_id,
                    cust_type: cust_type, cust_gender_id: cust_gender_id, cust_title: cust_title,
                    cust_firstname: cust_firstname, cust_lastname: cust_lastname, cust_citizen_id: cust_citizen_id,
                    cust_contact_detail: cust_contact_detail, cust_country_id: cust_country_id, cust_number: cust_number,
                    cust_address: cust_address, cust_subdistrict_id: cust_subdistrict_id, cust_district_id: cust_district_id,
                    cust_province_id: cust_province_id, cust_postcode: cust_postcode, cust_birthday: cust_birthday, cust_remark: cust_remark,
                    cust_is_defective: cust_is_defective, cust_is_public: cust_is_public
                },
                success: function (response, textStatus, jqXHR) {

                 
                    parent.$.fn.colorbox.close();
                    //savedataform();

                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('Error - ' + errorThrown);
                }
            });
        }

</script>
